<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1">
				<el-button type="warning" size="small" v-if="addShow!==-1" @click="add()" icon="el-icon-plus">新增</el-button>
			</el-col>
		</el-row>
		<el-table ref="multipleTable" stripe border :data="bannerLists" tooltip-effect="dark" style="margin-bottom: 10px;width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="name" label="名称" width="120"></el-table-column>
			<el-table-column prop="image" label="图片" width="150">
				<template slot-scope="scope">
					<img height="100" width="100" id="imageUrl" :src="imgurl+scope.row.imageUrl">
				</template>
			</el-table-column>
			<el-table-column prop="url" label="自定义图文ID" width="120"></el-table-column>
			<el-table-column prop="isShow" label="启用" width="120">
				<template slot-scope="scope">
					<span style="color:red;" v-if="scope.row.isShow==0">否</span>
					<span v-if="scope.row.isShow==1">是</span>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" width="120"></el-table-column>
			<el-table-column label="操作" min-width="300">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" v-if="updateShow!==-1" @click="update(scope.$index,scope.row.id)">编辑</el-button>
					<el-button size="mini" type="danger" v-if="scope.row.isShow==1&&staShow!==-1" @click="bannerupShowSta(scope.row.id, 0)">停用</el-button>
					<el-button size="mini" type="success" v-if="scope.row.isShow==0&&staShow!==-1" @click="bannerupShowSta(scope.row.id, 1)">启用</el-button>
					<el-button size="mini" type="danger" @click="del(scope.row.id)" v-if="deleShow!==-1">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
		<div class="modal fade" id="bannerAdd" tabindex="-1" role="dialog" data-keyboard="false">
			<div class="modal-dialog" role="document">
				<div class="modal-content" style="width:800px;height: 540px;">
					<div class="modal-header" style="border-radius: 4px;">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active">
								<a href="#qusInfo" aria-controls="qusInfo" role="tab" data-toggle="tab">新增/编辑</a>
							</li>
						</ul>
					</div>
					<div class="modal-body" style="padding-right: 60px;height:410px;overflow: hidden;overflow-y: auto;">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="qusInfo">
								<el-form :model="bannerModel" ref="bannerModel" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
									<input type="hidden" name="id" v-model="id">
									<el-col :span="12">
										<el-form-item label="名称 :" prop="name" :rules="MUSTINFO">
											<el-input v-model="bannerModel.name" size="small"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="图文ID:" prop="url">
											<el-input v-model="bannerModel.url" size="small"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="排序 :" prop="sort" :rules="MUSTNUMBER">
											<el-input v-model.number="bannerModel.sort" size="small"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="启用 :" prop="isShow" :rules="MUSTINFO">
											<el-radio-group v-model="bannerModel.isShow">
												<el-radio label="0">不启用</el-radio>
												<el-radio label="1">启用</el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="预览图 :" id="imgU">
											<el-upload class="avatar-uploader" name="file" :action="url" :show-file-list="false" :onSuccess="preImgSuccess">
												<img v-if="bannerModel.imageUrl" :src="imgurl+bannerModel.imageUrl" class="avatar">
												<i v-else class="el-icon-plus avatar-uploader-icon"></i>
											</el-upload>
											<span style="line-height: 2;display: block;">建议尺寸750px*320px</span>
										</el-form-item>
									</el-col>
								</el-form>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<el-button type="success" size="small" id="save" @click="save('bannerModel')" :loading="loading">保存</el-button>
						<el-button type="success" size="small" id="usave" @click="uSave('bannerModel')" :loading="loading">保存</el-button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>
<script>
	import axios from "axios"
	import ueditor from "components/ueditor.vue"
	import qs from "qs"
	import { MUSTNUMBER, MUSTINFO } from 'static/js/rules.js'
	export default {
		data() {
			return {
				purl: this.$store.state.purl, //权限数组
				url: this.GLOBAL.url,
				imgurl: this.GLOBAL.imgurl,
				currentPage: 1, //当前页
				totals: 0, //分页总条数
				size: 0, //每页条数
				totalPage: 0, //总页数
				inputPage: 1,
				bannerLists: [],
				staShow: 0,
				addShow: 0,
				MUSTNUMBER,
				MUSTINFO,
				loading:false,
				updateShow: 0,
				deleShow: 0,
				id: '',
				
				bannerModel: {
					name: '',
					sort: '',
					isShow: "1",
					imageUrl: ""
				},
			}
		},
		activated() {
			this.load(1);
			this.staShow = this.purl[0].findIndex((val) => val === "/interface/banner/add")
			this.addShow = this.purl[0].findIndex((val) => val === "/interface/banner/add") //判断是否拥有增加权限
			this.updateShow = this.purl[0].findIndex((val) => val === "/interface/banner/view") //判断是否拥有更新权限
			this.deleShow = this.purl[0].findIndex((val) => val === "/interface/banner/add")

		},
		methods: {
			load(num) {
				axios.get("/interface/banner/list?pageNo=" + num).then((res) => {
					this.bannerLists = res.data.data.list;
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})

			},
			add() {
				$("#bannerAdd").modal('show');
				$("#save").show();
				$("#usave").hide();
				this.bannerModel = {
					name: '',
					sort: '',
					isShow: "1",
					imageUrl: ""
				}
			},
			save(formname) {
				this.$refs[formname].validate((valid) => {
					if(valid) {
						
						if(this.bannerModel.imageUrl == "") {
							this.$message.error("请上传预览图");
							return;
						}
						this.loading=true;
						axios({
							method: 'post',
							url: '/interface/banner/add',
							data: this.bannerModel,
							headers: {
								'Content-Type': 'application/json'
							}
						}).then((res) => {
							if(res.data.code == 1) {
								this.loading=false;
								$("#bannerAdd").modal("hide");
								this.load(this.currentPage);
								this.$message.success("新增成功")
							} else {
								this.loading=false;
								var msg = res.data.msg;
								$("#bannerAdd").modal("hide");
								this.$alert(msg, '提示消息', {
									confirmButtonText: '确定',
									callback: action => {
										$("#bannerAdd").modal("show");
									}
								});
							}
						});
					}
				})
			},
			update(index, id) {
				$("#bannerAdd").modal('show');
				$("#save").hide();
				$("#usave").show();
				this.id = id;
				axios.get("/interface/banner/view?id=" + id).then((res) => {
					this.bannerModel = res.data.data
					this.bannerModel.isShow = res.data.data.isShow.toString()
				})
			},
			uSave(formname) {
				this.$refs[formname].validate((valid) => {
					if(valid) {
						if(this.bannerModel.imageUrl == "") {
							this.$message.error("请上传预览图");
							return;
						}
						this.loading=true;
						this.bannerModel.id = this.id;
						axios({
							method: 'post',
							url: '/interface/banner/add',
							data: this.bannerModel,
							headers: {
								'Content-Type': 'application/json'
							}
						}).then((res) => {
							if(res.data.code == 1) {
								this.loading=false;
								$("#bannerAdd").modal("hide");
								this.load(this.currentPage);
								this.$message.success("编辑成功")
							} else {
								this.loading=false;
								var msg = res.data.msg;
								$("#bannerAdd").modal("hide");
								this.$alert(msg, '提示消息', {
									confirmButtonText: '确定',
									callback: action => {
										$("#bannerAdd").modal("show");
									}
								});
							}
						});
					}
				})
			},
			handleCurrentChange(val) {
				this.currentPage = val - 0;
				this.inputPage = val;
				this.load(val)
			},
			preImgSuccess(res, file) {
				this.bannerModel.imageUrl = res.data;
				this.$message.success("上传成功");
			},
			del(id) {
				this.$confirm('确认要删除此条数据吗?', '删除警告', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios({
						method: 'post',
						url: '/interface/banner/add',
						data: {
							"id": id,
							"isDel": 1
						},
						headers: {
							'Content-Type': 'application/json'
						}
					}).then((res) => {
						this.load(1)
					})
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {});
			},
			bannerupShowSta(id, isShow) {
				var msg = "";
				if(isShow == 1) {
					msg = "确认启用该banner吗?";
				} else if(isShow == 0) {
					msg = "确认停用该banner吗?";
				} else {
					return;
				}
				this.$confirm(msg, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then((res) => {
					axios({
						method: 'post',
						url: '/interface/banner/add',
						data: {
							"id": id,
							"isShow": isShow
						},
						headers: {
							'Content-Type': 'application/json'
						}
					}).then((res) => {
						if(res.data.code == 1) {
							this.load(this.currentPage);
							this.$message.success("操作成功")
						} else {
							this.$message.error(res.data.msg)
						}
					});
				}).catch(() => {});
			}
		}
	}
</script>

<style>
	#bannerAdd .modal-dialog {
		left: 35% !important;
		top: 5% !important;
	}
	
	#imgU .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	#imgU .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	#imgU .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	#imgU .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	#imgU .el-upload__input {
		display: none !important;
	}
	
	#imgU .el-upload-list__item-actions i {
		color: white !important;
	}
</style>